<script lang="ts" setup>
import { renderFileJump } from '../../../../../../utils';
import { getPermitBeforeF9 } from '../../../apis';
import PageHeader from '../../../components/page-header.vue';
import { useF9Context } from '../../../use/use-context';
import Descriptions from '../components/descriptions.vue';
import Tabs from '../components/tabs.vue';
import ErrorModule from '../../../components/error-module.vue';

interface Props {
  /** 标题名称 */
  title: string;
  /** 标题 id */
  menuId: string;
  /** 数值 */
  count: number;
}

const {
  title,
  menuId,
  count
} = defineProps<Props>();

const { companyId } = useF9Context();

const activeTab = ref(0);

const { data: permitBeforeF9Data, error } = useRequest(getPermitBeforeF9, {
  defaultParams: [{ id: companyId }]
});

const infos = computed(() => {
  return (item) => {
    return [
      {
        name: '信息公开内容',
        value: item?.fileUrl ? renderFileJump(item, '查看') : '-'
      },
      {
        value: ' '
      },
      { name: '公司名称', value: item.companyName },
      { name: '行业类别', value: item.industryCategory },
      {
        name: '信息公开期间',
        value: `${item?.periodOfPublicityStartDate} 至 ${item?.periodOfPublicityExpirationDate}`
      },
      { name: '生产经营场所', value: item.productionSite },
      { name: '是否投产', value: item.productionOrNot },
      { name: '投产日期', value: item.productionDate },
      { name: '所在地是否属于大气重点控制区', value: item.keyAtmosphericControlArea },
      { name: '所在地是否属于总磷控制区', value: item.totalPhosphorusControlArea },
      { name: '所在地是否属于总氮控制区', value: item.totalNitrogenControlArea },
      {
        name: '所在地是否属于重金属污染特别排放限值实施区域',
        value: item.heavyMetalPollutionLimitArea
      },
      { name: '是否位于工业园区', value: item.locatedInIndustrialPark },
      { name: '所属工业园区名称', value: item.industrialPark }
    ];
  };
});
</script>

<template>
  <page-header class="my-15px" :count="count" :title="title" :menuId="menuId" is-small />
  
  <error-module v-if="error" :error="error"/>
  <tabs v-else-if="permitBeforeF9Data?.values?.length" :tabsData="permitBeforeF9Data?.values" :activeTab="activeTab" tabName="companyName">
    <template #default="slot">
      <descriptions :item="slot.item" :infos="infos"/>
    </template>
  </tabs>
  <vc-nodata v-else :type="200"/>
</template>

<style lang="scss" scoped>
.descriptions {
  :deep(.descriptions-content) {
    tbody {
      tr:first-child {
        td:nth-child(3) {
          background: white!important;
        }
        td {
          border: none!important;
        }
      }
    }
  }
}
</style>
